<template>
    <div class="app-container">
        <QueryForm v-model="queryForm" :form-items="formItems" @query="handleQuery" @reset="handleReset" />
        <div class="base-table">
            <div class="action">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="operate('add')">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" @click="handlePatchDel">批量删除</el-button>
                    </el-col>
                 </el-row>
            </div>
            <el-table :data="dataList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
                    :width="item.width" :formatter="item.formatter">
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <div class="operate">
                            <!-- <div class="operate-btn" @click="operate('add', scope.row)">
                                <el-icon :size="12" color="#409efc">
                                    <FolderAdd />
                                </el-icon>
                                新增
                            </div> -->
                            <div class="operate-btn" @click="operate('edit', scope.row)" size="mini">
                                <el-icon :size="12" color="#409efc">
                                    <Edit />
                                </el-icon>
                                编辑
                            </div>
                            <div class="operate-btn" @click="handleDel(scope.row._id)">
                                <el-icon :size="12" color="#409efc">
                                    <Delete />
                                </el-icon>
                                删除
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" background layout="prev, pager, next" :total="pager.total"
                :page-size="pager.pageSize" @current-change="handleCurrentChange" />
        </div>
        <userAdd v-if="showModal" :action="action" :Item="selectItem" @close="handleClose"></userAdd>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import utils from "@/utils/utils"
import QueryForm from "@/components/QueryForm/index.vue"
import { ElMessage } from 'element-plus'
import userAdd from './component/userAdd.vue'
const action = ref('add')
const selectItem = ref({})// 选中项
const { proxy } = getCurrentInstance();
const $Tajax = proxy.$Tajax;
// 查询表单配置
const formItems = [
    {
        type: 'input',
        label: '用户ID',
        prop: 'userId',
        placeholder: '请输入用户ID'
    },
    {
        type: 'input',
        label: '用户名称',
        prop: 'userName',
        placeholder: '请输入部门名称'
    },
    {
        type: 'select',
        label: '状态',
        prop: 'menuState',
        placeholder: '请选择状态',
        options: [
            { value: 1, label: '所有' },
            { value: 2, label: '在职' },
            { value: 2, label: '离职' },
            { value: 3, label: '试用期' },
        ]
    }
]
// 表格列配置
const columns = [
    {
        label: "用户ID",
        prop: "userId",
    },
    {
        label: "用户名",
        prop: "userName",
    },
    {
        label: "用户昵称",
        prop: "nickName",
    },
    {
        label: "用户邮箱",
        prop: "userEmail",
    },
    {
        label: "用户角色",
        prop: "role",
        formatter(row, column, value) {
            return {
                0: "管理员",
                1: "普通用户",
            }[value];
        },
    },
    {
        label: "用户状态",
        prop: "state",
        formatter(row, column, value) {
            return {
                1: "在职",
                2: "离职",
                3: "试用期",
            }[value];
        },
    },
    {
        label: "注册时间",
        prop: "createTime",
        width: 180,
        formatter: (row, column, value) => {
            return utils.formateDate(new Date(value));
        },
    },
    {
        label: "最后登录时间",
        prop: "lastLoginTime",
        width: 180,
        formatter: (row, column, value) => {
            return utils.formateDate(new Date(value));
        },
    },
]
// 响应式状态
const queryForm = reactive({})
const dataList = ref([])
// 初始化分页对象
const pager = reactive({
    pageNum: 1,
    pageSize: 10,
});
// 选中用户列表对象
const checked_ids = ref([]);
const showModal = ref(false)

// 方法定义
const handleQuery = () => {
    console.log(queryForm)
    getdataList()
}
// 分页事件处理
const handleCurrentChange = (current) => {
    pager.pageNum = current;
    getdataList();
};
// 列表初始化
const getdataList = async () => {
    let params = { ...queryForm, ...pager };
    try {
        const { list, page } = await $Tajax.getUserList(params)
        dataList.value = list;
        pager.total = page.total;
    } catch (e) {
        throw new Error(e)
    }
}
// 表格多选
const handleSelectionChange = (list) => {
  let arr = [];
  list.map((item) => {
    arr.push(item._id);
  });
  checked_ids.value = arr;
};

// 表单重置
const handleReset = () => {
    this.getdataList()
}

// 新增\编辑
const operate = (type, row) => {
    action.value = type
    selectItem.value = row
    setTimeout(() => {
        showModal.value = true
    }, 100)
}

// 批量删除
const handlePatchDel = async () => {
  if (checked_ids.value.length == 0) {
    proxy.$message.error("请选择要删除的用户");
    return;
  }
  const res = await proxy.$Tajax.userDel({
    _ids: checked_ids.value, //可单个删除，也可批量删除
  });
  if (res.deletedCount > 0) {
    proxy.$message.success("删除成功");
    getUserList();
  } else {
    proxy.$message.success("修改失败");
  }
};
// 删除
const handleDel = async (_id) => {
    if (checked_ids.value.length == 0) {
        proxy.$message.error("请选择要删除的用户");
        return;
    }
    const res = await proxy.$Tajax.userDel({
        _ids: checked_ids.value, //可单个删除，也可批量删除
    });
    if (res.nModified > 0) {
        proxy.$message.success("删除成功");
        getUserList();
    } else {
        proxy.$message.success("修改失败");
    }
    getdataList()
}

// 弹框关闭
const handleClose = (e) => {
    showModal.value = false
    if (e) {
        getdataList()
    }
}

// 生命周期钩子
onMounted(() => {
    getdataList()
})
</script>
<style lang="scss">
.headerRow {
    height: 45px;
    background: #f8f8f9;
    border: #f1f1f1;
}
</style>